import React, { useState } from 'react'
import Topo from './Topo'
import TopoCard from './Card'

const AntVTree = () => {
  const [graph, setGraph] = useState(true)

  const updateTreeData = () => {
    graph.updateChild({
      id: 'sub1',
      children: [
        {
          id: 'subTree1',
        },
        {
          id: 'subTree2',
        },
      ],
    })
    // 更新布局后要自适应窗口
    graph.fitView()
  }
  const getGraph = (data) => {
    setGraph(data)
  }
  const cut = () => {
    setGraph(!graph)
  }
  return (
    <div>
      {graph && <button onClick={updateTreeData}>变换数据</button>}
      <button onClick={cut}>看板与拓扑之间切换</button>
      {graph ? <Topo getGraph={getGraph} /> : <TopoCard />}
    </div>
  )
}

export default AntVTree
